<template>
<transition
    name="animate__animated animate__bounce"
    appear
    enter-active-class="animate__flash"
    leave-active-class="animate__fadeOut"
>
    <li class="item-box clearfix">
      <label>
        <input type="checkbox" :checked="todoObj.done" @click="handleCheck" />
        <span v-show="!todoObj.isEdit">{{ todoObj.title }}</span>
        <input
          v-show="todoObj.isEdit"
          type="text"
          :value="todoObj.title"
          @blur="handleBlur(todoObj, $event)"
          ref="showFocus"
        />
      </label>
      <button class="box-Btn" @click="handleDelete()">删除</button>
      <button
        class="box-Btn btn-edit"
        @click="handleEdit(todoObj)"
        v-show="!todoObj.isEdit"
      >
        编辑
      </button>
    </li>
</transition>
</template>

<script>
import 'animate.css'
export default {
  name: "TodoInfoItem",
  props: ["todoObj"],
  methods: {
    handleCheck() {
      //通知app将todo的done值取反
      this.$bus.$emit("checkTodo", this.todoObj.id);
    },
    //删除id
    handleDelete() {
      if (confirm("确定完成了吗")) {
        this.$bus.$emit("deleteTodo", this.todoObj.id);
      }
    },
    handleEdit(todoObj) {
      if (Object.prototype.hasOwnProperty.call(todoObj, "isEdit")) {
        todoObj.isEdit = true;
      } else {
        this.$set(todoObj, "isEdit", true);
      }
      //获取焦点
      this.$nextTick(function () {
        this.$refs.showFocus.focus();
      });
      //定时器方法
      // setTimeout(()=>{
      //   this.$refs.showFocus.focus();
      // })
    },
    handleBlur(todoObj, e) {
      todoObj.isEdit = false;
      if (!e.target.value.trim()) return alert("输入内容不能为空");
      this.$bus.$emit("updataTodo", todoObj.id, e.target.value);
    },
  },
};
</script>

<style>
.clearfix::after {
  clear: both;
  display: block;
  height: 0;
  content: "";
}
.item-box {
  margin-left: -42px;
  /* margin-bottom:8px ; */
  padding: 5px;
  border-bottom: 1px solid #ddd;
}
.item-box:hover button {
  display: block;
}
.item-box:hover {
  background-color: #ddd;
}
.item-box input {
  display: inline-block;
  vertical-align: middle;
  height: 14px;
}
.box-Btn {
  float: right;
  margin-right: 8px;
  background-color: #e15d47;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 15px;
  display: none;
}
.box-Btn:hover {
  cursor: pointer;
}
.box-Btn:active {
  color: #f2d7c4;
}
.btn-edit {
  color: #fff;
  background-color: rgb(14, 204, 156);
}
</style>
